<template>
  <video
    :id="id"
    :src="src"
    :style="customStyle"
    play-btn-position="center"
    @ended="$emit('ended')"
  />
</template>

<script lang="ts">
import { guidGenerator } from '@/utils/guid';
import type { CSSProperties } from 'vue';

export default {
  props: {
    src: {
      type: String,
      required: true
    },
    customStyle: {
      type: Object as PropType<CSSProperties>,
      default: () => ({})
    },
    mode: {
      type: String as PropType<
        'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix'
      >,
      default: 'widthFix'
    }
  },
  emits: ['ended'],
  data () {
    return {
      id: `video-${guidGenerator()}`
    };
  },
  methods: {
    play () {
      const context = uni.createVideoContext(this.id, this);
      context?.play();
    },
    pause () {
      const context = uni.createVideoContext(this.id, this);
      context?.pause();
    }
  }
};
</script>

<style lang="scss" scoped></style>
